<template>
    <div class="fillcontain">
        <head-top>
        </head-top>
        <el-row style="margin-top: 20px;">
            <el-form ref="form" :model="form" label-width="100px">
                <el-col :span="5" :offset="1">
                    <el-form-item label="用户姓名:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="手机号码:">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-button type="primary" @click="getUsers">查询</el-button>
                </el-col>
            </el-form>
        </el-row>

        <div class="table_container">
            <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%">
                <el-table-column
                        property="id"
                        label="用户id"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="name"
                        label="用户姓名">
                </el-table-column>
                <el-table-column
                        property="phone"
                        label="手机号码">
                </el-table-column>
                <el-table-column
                        property="birthday"
                        :formatter="dateFormat"
                        label="生日">
                </el-table-column>
                <el-table-column
                        property="birthdayState"
                        label="生日短信">
                    <template slot-scope="scope">
                        {{getChangeType3(scope.row.birthdayState)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.birthdayState"
                                on-value="1" off-value="0"
                                @change="up(scope.row.id,scope.row.birthdayState)">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                        style="margin-top:15px;"
                        background
                        layout="prev, pager, next"
                        :current-page.sync="pagination.current"
                        :page-size.sync="pagination.size"
                        :total="pagination.count"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>


        </div>
    </div>
</template>

<script>
	import headTop from '../components/headTop'


	var msgapi = '/msgapi/...'
	export default {
		data() {
			return {
				tableData: [{
					registe_time: '2016-05-02',
					username: '王小虎',
					city: '上海市普陀区金沙江路 1518 弄'
				}],
				pagination: {
					current: 1,
					size: 3,
					count: 0,
					orderby: ''  //升降序
				},
				dialogFormVisibleUpdate: false,
				dialogFormVisibleAdd: false,
				form: {
					name: '',
					phone: ''
				},
				options2: [{
					value: '1',
					label: true
				}, {
					value: '0',
					label: false
				}],
				options3: [{
					value: '1',
					label: '开启'
				}, {
					value: '0',
					label: '关闭'
				}],
			}
		},

		components: {
			headTop,

		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					this.getUsers(this.pagination.current);
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pagination.current = val;

				this.getUsers(this.pagination.current)
			},
			async up(id, birthdayState) {
				var url = ''
				if (birthdayState == "1") {
					var url = "http://127.0.0.1:9522/phone/birthday/turn/on/" + id
				}
				if (birthdayState == "0") {
					var url = "http://127.0.0.1:9522/phone/birthday/turn/off/" + id
				}
				this.$axios({
					url: url,
					method: "get",

				}).then(res => {
					this.getUsers();
				})
			},
			async getUsers(current) {
				this.$axios({
					url: "http://127.0.0.1:9522/phone/view/getall/" + this.pagination.current + "/10/",
					method: "get",
					params: {
						name: this.form.name,
						cityCode: this.form.cityCode,
						phone: this.form.phone
					}
				}).then(res => {
					console.log(res)
					this.tableData = res.data.records;
					// 当前页
					this.pagination.current = res.data.current;
					this.pagination.size = res.data.size
					this.pagination.count = res.data.total
				})
			},
			getSelectItemData(row) {
				console.log(row);
				this.update.name = row.name;
				this.update.cityCode = row.cityCode;
				this.update.phone = row.phone;
				this.update.id = row.id;
				this.update.state = row.state;
				this.update.rule = row.rule;
				this.update.birthday = row.birthday;
				this.update.birthdayState = row.birthdayState;
			},
			getChangeType2(e) {
				for (var i = 0; i < this.options2.length; i++) {
					if (this.options2[i].value == e) {
						return this.options2[i].label;
					}
				}
			},

			getChangeType3(e) {
				for (var i = 0; i < this.options3.length; i++) {
					if (this.options3[i].value == e) {
						return this.options3[i].label;
					}
				}
			},
			dateFormat: function (row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.$moment(date).format("YYYY-MM-DD");
			},

		},
	}
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
